import React, { Component, createRef } from "react";
import { Form, Input, Button, message } from "antd";
import { UserOutlined, LockOutlined, KeyOutlined } from "@ant-design/icons";
import Captcha from "../../components/Captcha";
// 导入请求资源
import url from "../../config/url";
import req from "../../http/req";
import { withRouter } from "react-router-dom";

class Passwdlogin extends Component {
    constructor(props) {
        super(props);
        this.capRef = createRef();
    }
    state = {};
    render() {
        return (
            <Form name="normal_login" className="login-form" initialValues={{}} onFinish={this.onFinish}>
                <Form.Item
                    name="username"
                    rules={[
                        {
                            required: true,
                            message: "请输入用户名！",
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[
                        {
                            required: true,
                            message: "请输入密码！",
                        },
                    ]}
                >
                    <Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码" />
                </Form.Item>
                <Form.Item
                    name="captcha"
                    rules={[
                        {
                            required: true,
                            message: "请输入验证码！",
                        },
                    ]}
                >
                    <div>
                        <Input
                            prefix={<KeyOutlined className="site-form-item-icon" />}
                            type="text"
                            placeholder="验证码"
                            style={{ width: "70%", marginRight: "7px" }}
                        />
                        <Captcha h={32} w={96} setKey={this.getKey} ref={this.capRef} />
                    </div>
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button" block>
                        登录
                    </Button>
                </Form.Item>
            </Form>
        );
    }

    // 提交处理程序
    onFinish = (values) => {
        // 将state中key值补录到values中
        values.key = this.state.key;
        // 发送请求
        req.post(url.PasswdLogin, values).then((res) => {
            if (res.data.errNo === 0) {
                // 没错
                message.success("登录成功！", 2, () => {
                    this.props.history.push("/dashboard");
                });
            } else {
                // 错误
                message.error(res.data.errText, 2, () => {
                    // 刷新验证码
                    this.capRef.current.loadCaptcha();
                });
            }
        });
    };

    // 获取验证码key值的方法
    getKey = (key) => {
        this.setState({
            key,
        });
    };
}

export default withRouter(Passwdlogin);
